<template>
  <div class="labourTeam">
    <el-row class="labourTeam_nav">
      <el-col :span="24" class="titles">劳务班组</el-col>
    </el-row>
    <el-row class="labourTeamContent">
      <el-col :span="24" style="margin-bottom:20px">
        <div>
          选择班组：
          <el-select v-model="team" placeholder="请选择" @change="selectTeamData">
            <el-option
              v-for="(item,index) in teamData"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-input
            placeholder="请输入人员姓名"
            v-model="personnel"
            style="width:300px"
            @keyup.enter.native="search"
          >
            <el-button slot="append" icon="el-icon-search" type="primary" @click="search"></el-button>
          </el-input>
        </div>
      </el-col>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{'background-color': '#F5F5F5','text-align':'center'}"
          >
            <el-table-column prop="name" label="姓名" align="center"></el-table-column>
            <el-table-column
              prop="sex"
              label="性别"
              :render-header="renderSexHeader"
              :formatter="handleSexFilter"
              align="center"
            ></el-table-column>
            <el-table-column prop="age" label="年龄" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
            <el-table-column prop="job_id" label="职称" :render-header="renderJobHeader" :formatter="handleJobFilter" align="center"></el-table-column>
            <el-table-column prop="group_status_name" label="在岗情况" align="center"></el-table-column>
            <el-table-column
              prop="is_leader
              "
              label="是否为负责人"
              :render-header="renderLeaderHeader"
              :formatter="handleLeaderFilter"
              align="center"
            ></el-table-column>
          </el-table>
        </template>
      </el-col>
      <el-col :span="24" style="padding:40px 0;text-align: center;">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next, jumper"
          :total="pageTotal"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { monitorPublicApi } from "@/services/ProjectCenter";
import { standardCodeApi } from "@/services/StandardCode";
export default {
  data() {
    return {
      tableData: [],
      team: "",
      teamData: [],
      page: 1,
      pageTotal: 0,
      projects: this.$route.query.projects,
      personnel: "",
      sexValue: "",
      sexData: [],
      jobValue: "",
      jobData: [],
      leaderValue: "",
      leaderData: [],
      uuid: this.$route.query.uuid
    };
  },
  methods: {
    //获取表格数据
    getData() {
      monitorPublicApi
        .getServiceGroupList({
          params: {
            project_id: this.projects,
            page: this.page,
            name: this.personnel,
            sex: this.sexValue,
            labor_team_id: this.team,
            job_id: this.jobValue,
            is_leader: this.leaderValue
          }
        })
        .then(res => {
          this.tableData = res.data.data;
          this.pageTotal = res.data.total;
        });
    },
    //获取班组数据
    getTeamData() {
      monitorPublicApi
        .getGroupList({
          params: {
            project_id: this.projects
          }
        })
        .then(res => {
          this.teamData = res.data;
          if (this.teamData.length != 0) {
            this.team = res.data[0].id;
          } else {
            return false;
          }

          this.getData();
        });
    },
    //选择班组
    selectTeamData() {
      this.getData();
    },
    search() {
      this.getData();
    },
    searchSex() {
      this.getData();
    },
    searchJob() {
      this.getData();
    },
    searchLeader() {
      this.getData();
    },
    //分页
    handleCurrentChange(page) {
      this.page = page;
      this.getData();
    },
    renderSexHeader(h) {
      //下拉框选项
      let filters = this.sexData;
      return h(
        "el-select",
        {
          //el-select实现下拉框
          style: "width:150px;margin-left:-25px",
          class: "normal-top-select",
          on: {
            input: value => {
              //随着下拉框的不同，文字框里的内容改变
              this.sexValue = value;
              change: this.searchSex(); // 文字框里的内容 change事件
            }
          },
          props: {
            value: this.sexValue //文字框的内容取决于这个value
          }
        },
        [
          //下拉框里面填充选项，通过map遍历filters，为每一个选项赋值。
          filters.map(item => {
            return h("el-option", {
              props: {
                value: item.value,
                label: item.name
              }
            });
          })
        ]
      );
    },
    renderJobHeader(h) {
      //下拉框选项
      let filters = this.jobData;
      return h(
        "el-select",
        {
          //el-select实现下拉框
          style: "width:150px;margin-left:-50px",
          class: "normal-top-select",
          on: {
            input: value => {
              //随着下拉框的不同，文字框里的内容改变
              this.jobValue = value;
              change: this.searchJob(); // 文字框里的内容 change事件
            }
          },
          props: {
            value: this.jobValue //文字框的内容取决于这个value
          }
        },
        [
          //下拉框里面填充选项，通过map遍历filters，为每一个选项赋值。
          filters.map(item => {
            return h("el-option", {
              props: {
                value: item.value,
                label: item.name
              }
            });
          })
        ]
      );
    },
    renderLeaderHeader(h) {
      //下拉框选项
      let filters = this.leaderData;
      return h(
        "el-select",
        {
          //el-select实现下拉框
          style: "width:180px",
          class: "normal-top-select",
          on: {
            input: value => {
              //随着下拉框的不同，文字框里的内容改变
              this.leaderValue = value;
              change: this.searchLeader(); // 文字框里的内容 change事件
            }
          },
          props: {
            value: this.leaderValue //文字框的内容取决于这个value
          }
        },
        [
          //下拉框里面填充选项，通过map遍历filters，为每一个选项赋值。
          filters.map(item => {
            return h("el-option", {
              props: {
                value: item.value,
                label: item.name
              }
            });
          })
        ]
      );
    },
    //性别下拉
    getSexData() {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "labor_team_sex"
          }
        })
        .then(res => {
          this.sexData = res.data.list;
          this.sexData.unshift({ name: "性别", value: "" });
        })
        .catch(error => {
          console.log(error);
        });
    },
    //性别数据过滤
    handleSexFilter(row) {
      var sex;
      this.sexData.filter(item => {
        if (item.value == row.sex) {
          sex = item.name;
        }
      });
      return sex;
    },
    //职称数据
    getJobData() {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "labor_team_job"
          }
        })
        .then(res => {
          this.jobData = res.data.list;
          this.jobData.unshift({ name: "职称", value: "" });
        })
        .catch(error => {
          console.log(error);
        });
    },
     //职称数据过滤
    handleJobFilter(row) {
      var job;
      this.jobData.filter(item => {
        if (item.value == row.job_id) {
          job = item.name;
        }
      });
      return job;
    },
    //是否为负责人
    getLeaderData() {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "labor_team_leader"
          }
        })
        .then(res => {
          this.leaderData = res.data.list;
          this.leaderData.unshift({ name: "是否负责人", value: "" });
        })
        .catch(error => {
          console.log(error);
        });
    },
        //负责人数据过滤
    handleLeaderFilter(row) {
      var leader;
      this.leaderData.filter(item => {
        if (item.value == row.is_leader) {
          leader = item.name;
        }
      });
      return leader;
    },
  },
  created() {
    this.getJobData();
    this.getTeamData();
    this.getLeaderData();
    this.getSexData();
    this.getData();
  }
};
</script>
<style scoped lang="scss">
.labourTeam_nav {
  padding: 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #d9d9d9;
  height: 60px;

  .titles {
    text-align: left;
    line-height: 60px;
    font-size: 16px;
    color: #1441b3;
  }

  .backScreen {
    text-align: right;
    line-height: 60px;
  }
}
 /deep/ .normal-top-select .el-input__inner {
    border: 0;
    outline: none;
    background: #f5f5f5;
    // padding-right: 0px;
    text-align: right;
  }
.labourTeamContent {
  padding: 0 20px;
}
</style>